<template>
  <el-dialog title="权限点" :visible="showDialog" center @close="btnCancel">
    <!-- 表单 -->
    <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="formData.name" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="formData.code" style="width:90%" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="formData.description" style="width:90%" />
      </el-form-item>
      <el-form-item label="开启">
        <el-switch
          v-model="formData.enVisible"
          active-value="1"
          inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" @click="btnOK">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermission, updatePermission, getPermissionDetail } from '@/api/permisson'
export default {
  data() {
    return {
      // 对话框显示标识
      showDialog: false,
      // 表单数据
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0'
      },

      // 校验规则
      rules: { name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }] }
    }
  },

  computed: {

  },
  methods: {
    // 关闭对话框方法
    async  btnCancel() {
      this.showDialog = false
      // 重置表单
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '0'
      }
      // 重置校验规则,一定要用awit，不然会报错
      await this.$refs.perForm.resetFields()
    },

    // 添加权限前修改数据方法
    addPermission(type, id) {
      this.formData.type = type
      this.formData.pid = id
      this.showDialog = true
    },

    // 编辑权限前请求权限信息方法
    async editPermission(id) {
      // 根据ID获取对象权限信息
      this.formData = await getPermissionDetail(id)
      this.showDialog = true
    },

    // 确认添加、编辑权限方法
    async  btnOK() {
      // 校验表单
      const res = await this.$refs.perForm.validate()
      if (res) {
        if (this.formData.id) {
          // 编辑权限
          await updatePermission(this.formData)
          this.$message.success('编辑成功')
        } else {
          // 添加权限
          await addPermission(this.formData)
          this.$message.success('添加成功')
        }

        //  通知父组件请求最新权限列表
        this.$emit('update')
        this.showDialog = false
      }
    }

  }
}
</script>

<style>

</style>
